import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import DemoPage from "@/components/DemoPage";
import Message from "@/components/Message";
import MessageCard from "@/components/MessageCard";
import CardView from "@/components/CardView";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
export default defineComponent({
  name: "",
  setup() {
    const form = ref({ startDate: "", endDate: "" });
    const data = [
      {
        text: "sss",
        time: "1",
      },
      {
        text: "131231",
        time: "1",
      },
    ];
    const render1 = () => {
      return <MessageCard data={data} />;
    };
    const render2 = () => {
      return <Message data={data} />;
    };
    const render3 = () => {
      return (
        <CardView>
          <div class="blue-text">报名线下培训会届时请准时参加并签到</div>
        </CardView>
      );
    };
    const render4 = () => {
      return (
        <CardView
          title="测试"
          right={() => <div class="blue-text">查看更多</div>}
        >
          <div class="blue-text">报名线下培训会届时请准时参加并签到</div>
        </CardView>
      );
    };
    const render5 = () => {
      const choose: IFilterMenuChoose[] = [
        {
          type: "area",
          key: "code",
        },
        {
          type: "productType",
          key: "code",
        },
        {
          type: "datePicker",
          keys: ["startDate", "endDate"],
        },
      ];
      return <FilterMenuSearch v-model={form} choose={choose} />;
    };
    return () => {
      const data = [
        {
          name: "消息滚动",
          view: render1,
        },
        {
          name: "普通消息组件",
          view: render2,
        },
        {
          name: "普通卡片",
          view: render3,
        },
        {
          name: "普通卡片-自定义右侧",
          view: render4,
        },
        {
          name: "筛选组件-完整页面(helpTraceabilityXh)",
          view: render5,
        },
      ];
      return <DemoPage data={data} />;
    };
  },
});
